import React, { Component } from 'react'
import { connect } from 'dva';
import XLSX from "xlsx";
import { Button, Table, message } from 'antd';
import { exportExcl } from '@/utils/xlsx';
import {getQueryString, isNumber} from '@/utils/util';
import SearchStatisticalDevice from './components/SearchStatisticalDevice';
import styled from './styled.less';
import {TOTAL} from './enum';

interface IProps {
  dispatch?: Function,
  children?: React.ReactNode,
  buttons?: Array<any>,
  total?: object,
  deviceFireHost?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceSmartSmoke?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceWisdomElectriccity?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceOutdoorFireHydrant?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceCamera?: {
    data: Array<any>,
    dataCnt: number
  },
  transmission?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceFireHostChild?: {
    data: Array<any>,
    dataCnt: number
  },
  deviceFlame?: {
    data: Array<any>,
    dataCnt: number
  }
}

@connect(({ analyse_device, loading }) => ({
  total: analyse_device.total || {},
  deviceFireHost: analyse_device.deviceFireHost,
  deviceSmartSmoke: analyse_device.deviceSmartSmoke,
  deviceWisdomElectriccity: analyse_device.deviceWisdomElectriccity,
  deviceOutdoorFireHydrant: analyse_device.deviceOutdoorFireHydrant,
  deviceCamera: analyse_device.deviceCamera,
  transmission: analyse_device.transmission,
  deviceFireHostChild: analyse_device.deviceFireHostChild,
  deviceFlame: analyse_device.deviceFlame
}))
class DeviceFireHost extends Component<IProps> {

  state = {
    status: getQueryString('status'),
    type: getQueryString('type'),
    current: 1,
    deviceAllData: JSON.parse(sessionStorage.getItem('deviceRecord'))
  };

  queryData = (params) => {
    const { dispatch } = this.props;
    let deviceType = 'analyse_device/queryDeviceFireHost';
    switch(this.state.type) {
      case '1':
        deviceType = 'analyse_device/queryDeviceFireHost';
        break;
      case '2':
        deviceType = 'analyse_device/queryDeviceSmartSmoke';
        break;
      case '3':
        deviceType = 'analyse_device/queryDeviceWisdomElectriccity';
        break;
      case '4':
        deviceType = 'analyse_device/queryDeviceOutdoorFireHydrant';
        break;
      case '5':
        deviceType = 'analyse_device/queryDeviceCamera';
        break;
      case '6':
        deviceType = 'analyse_device/queryTransmission';
        break;
      case '7':
        deviceType = 'analyse_device/queryDeviceFireHostChild';
        break;
      case '8':
        deviceType = 'analyse_device/queryDeviceFlame';
        break;
    }
    dispatch({
      type: deviceType,
      payload: params
    });
  };

  initCurrent = () => {
    this.setState({
      current: 1
    })
  };

  handleExport = e => {
    let deviceData = {
      data: []
    };
    switch(this.state.type) {
      case '1':
        const { deviceFireHost = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFireHost;
        break;
      case '2':
        const { deviceSmartSmoke = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceSmartSmoke;
        break;
      case '3':
        const { deviceWisdomElectriccity = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceWisdomElectriccity;
        break;
      case '4':
        const { deviceOutdoorFireHydrant = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceOutdoorFireHydrant;
        break;
      case '5':
        const { deviceCamera = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceCamera;
        break;
      case '6':
        const { transmission = {data: [], dataCnt: 0} }  = this.props;
        deviceData = transmission;
        break;
      case '7':
        const { deviceFireHostChild = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFireHostChild;
        break;
      case '8':
        const { deviceFlame = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFlame;
        break;
    }
    const { data = [] } = deviceData || {};
    // data.push({
    //   kindName: '合计',
    //   ...total
    // });

    const ans = data && Array.isArray(data) && data.map(item => {
      return {
        '设备名称': item.name ? item.name : item.fireRoomName,
        '安装位置': this.state.type !== '4' ? item.installLocationName ? item.installLocationName : '' : item.installLocation,
        '设备状态': item.statusName,
        '损坏持续时间': item.handleRate,
        '连续报警次数': item.finishRate
      }
    });

    exportExcl({
      XLSX,
      data: ans,
      name: "消防主机统计",
      fileName: "消防主机统计"
    })
  };

  componentWillMount() {
    message.loading('', 0.6);
    this.queryData({
      pageNum: 1,
      pageSize: 10,
      status: this.state.status
    });
  }

  toPercentage(value = 0) {
    return `${isNumber(+value) ? (+value * 100).toFixed(2) : 0} %`;
  }

  render() {
    let deviceData = {
      data: [],
      dataCnt: 0
    };
    switch(this.state.type) {
      case '1':
        const { deviceFireHost = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFireHost;
        break;
      case '2':
        const { deviceSmartSmoke = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceSmartSmoke;
        break;
      case '3':
        const { deviceWisdomElectriccity = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceWisdomElectriccity;
        break;
      case '4':
        const { deviceOutdoorFireHydrant = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceOutdoorFireHydrant;
        break;
      case '5':
        const { deviceCamera = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceCamera;
        break;
      case '6':
        const { transmission = {data: [], dataCnt: 0} }  = this.props;
        deviceData = transmission;
        break;
      case '7':
        const { deviceFireHostChild = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFireHostChild;
        break;
      case '8':
        const { deviceFlame = {data: [], dataCnt: 0} }  = this.props;
        deviceData = deviceFlame;
        break;
    }
    const { data = [], dataCnt = 0 } = deviceData || {};
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
        key: index,
      name: item.fireRoomName ? item.fireRoomName : item.name,
        positionName: this.state.type !== '4' ? item.installLocationName ? item.installLocationName : '' : item.installLocation ? item.installLocation : '/',
      statusName: item.statusName ? item.statusName : '/',
        handleRate: item.handleRate || item.handleRate === 0 ? item.handleRate : '/',
        finishRate: item.finishRate || item.finishRate === 0 ? item.finishRate : '/'
      })
    ) : [];

    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: 10,
      onChange: (current) => {
        this.setState({
          current,
          isChangePage: true
        });
        this.queryData({
          pageSize: 10,
          pageNum: current,
          status: this.state.status
        })
      },
    };

    const columns = [{
      title: '设备名称',
      dataIndex: 'name',
    }, {
      title: '安装位置',
      dataIndex: 'positionName',
    }, {
      title: '设备状态',
      dataIndex: 'statusName',
    }, {
      title: '损坏持续时间',
      dataIndex: 'handleRate'
    }, {
      title: '连续报警次数',
      dataIndex: 'finishRate'
    }];


    return (
      <>
        <div className={styled.device_statistical} style={{ paddingTop: '40px', paddingLeft: '40px' }}>
          <Button onClick={() => {
            window.history.back();
          }} type="primary" style={{'marginRight': '60px'}}>返回</Button>
          <p>
            {
              Array.isArray(TOTAL) ? TOTAL.map((item, index) => (
                <span key={index}><img src={item.icon} alt=""/>{item.name}：{this.state.deviceAllData[item.cname]}</span>
              )) : null
            }
          </p>
        </div>
        <SearchStatisticalDevice
          current={ this.state.current }
          initCurrent={this.initCurrent}
          handleExport={this.handleExport}
          status={this.state.status}
          type={this.state.type}
        />
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
        />
      </>
    );
  }
}

export default DeviceFireHost;
